$footer-breakpoint-tablet: 62.5em;
$footer-breakpoint-mobile: 40em;

.root {
  --docs-footer-height: 400px;

  @media (max-width: $footer-breakpoint-tablet) {
    --docs-footer-height: 520px;
  }

  @media (max-width: $footer-breakpoint-mobile) {
    --docs-footer-height: 380px;
  }
}

.spacer {
  height: var(--docs-footer-height);
}

.wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--docs-footer-height);

  @mixin light {
    background-color: var(--mantine-color-gray-0);
  }

  @mixin dark {
    background-color: var(--mantine-color-dark-8);
  }

  &[data-with-navbar] {
    padding-left: calc(var(--docs-navbar-width) + var(--mantine-spacing-md) * 2);
    padding-right: calc(var(--mantine-spacing-md) * 2);

    @media (max-width: $docs-mdx-breakpoint) {
      padding-left: calc(var(--docs-navbar-width) + var(--mantine-spacing-md));
      padding-right: calc(var(--mantine-spacing-md));
    }

    @media (max-width: $docs-navbar-breakpoint) {
      padding-left: var(--mantine-spacing-md);
      padding-right: var(--mantine-spacing-md);
    }

    @mixin rtl {
      padding-left: calc(var(--mantine-spacing-md) * 2);
      padding-right: calc(var(--docs-navbar-width) + var(--mantine-spacing-md) * 2);

      @media (max-width: $docs-mdx-breakpoint) {
        padding-left: calc(var(--mantine-spacing-md));
        padding-right: calc(var(--docs-navbar-width) + var(--mantine-spacing-md));
      }

      @media (max-width: $docs-navbar-breakpoint) {
        padding-left: var(--mantine-spacing-md);
        padding-right: var(--mantine-spacing-md);
      }
    }
  }
}

.inner {
  padding-top: calc(var(--mantine-spacing-xl) * 2);
  padding-bottom: calc(var(--mantine-spacing-xl) * 2);
  display: flex;
  justify-content: space-between;

  @media (max-width: $footer-breakpoint-tablet) {
    flex-direction: column;
  }

  @media (max-width: $footer-breakpoint-mobile) {
    padding-bottom: var(--mantine-spacing-md);
  }
}

.logoSection {
  max-width: 300px;

  @media (max-width: $footer-breakpoint-tablet) {
    margin-bottom: var(--mantine-spacing-xl);
  }

  @media (max-width: $footer-breakpoint-mobile) {
    margin-bottom: 0;
  }
}

.description {
  margin-top: var(--mantine-spacing-xs);

  @mixin light {
    color: var(--mantine-color-gray-6);
  }

  @mixin dark {
    color: var(--mantine-color-dark-2);
  }
}

.title {
  margin-bottom: var(--mantine-spacing-sm);
  line-height: 1;
}

.afterFooter {
  border-top: 1px solid;
  padding-top: var(--mantine-spacing-md);

  @mixin light {
    border-color: var(--mantine-color-gray-2);
  }

  @mixin dark {
    border-color: var(--mantine-color-dark-4);
  }
}

.afterFooterNote {
  &,
  & a {
    @mixin light {
      color: var(--mantine-color-gray-6);
    }

    @mixin dark {
      color: var(--mantine-color-dark-2);
    }
  }
}

.groups {
  display: flex;

  @media (max-width: $footer-breakpoint-mobile) {
    display: none;
  }
}

.social {
  display: flex;

  @media (max-width: $footer-breakpoint-mobile) {
    display: block;
  }
}

.socialButton {
  &:last-of-type {
    margin-left: var(--mantine-spacing-md);
  }

  @mixin rtl {
    &:last-of-type {
      margin-left: 0;
      margin-right: var(--mantine-spacing-md);
    }
  }

  @media (max-width: $footer-breakpoint-mobile) {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: var(--mantine-spacing-sm);
  }
}
